Joney Li

如何归纳碎片化🧩化的知识

很多时候，我们会发现你要学习的东西非常的多，非常的碎片化，举一个简单的例子，我目前需要学习的东西非常非常的多

Nodejs的知识
Web的开发知识
Android 开发知识
IOS 开发知识
React Naive 开发只是
Golang 开发知识
.....

你会发现我们需要学习的东西，好像开起来非常的多。多没有关系我们可以通过归纳整理起来，一块一块的去赠礼收集，但是我要讲的东西上这样的情况，比如学习英语的时候我的知识文档的结构迁移和演化

第一个版本

我仅仅是按照教程，一步一步的去做，然后把它归纳成了自己的知识，（说白了这个阶段，我仅仅是学习，按部就班的学习）这个阶段我做的笔记看起来是这个样子的：👇

第二个版本

等我慢慢的学习的过程之中，我逐渐的发现，这样的做笔记的方法，并不是总能非常好的符合我自己，而且也不够结构化，于是我演变成了下面的结构，（我在学习的过程中，我发现 listening 和预习，实际上没有必要用一个单独的title 去进行构造，于是我的做笔记的方法开始演化，我去掉了听力去掉了预习标题，我把语法和词法都做成了表格，现在他们是这个样子的 👇：

第三个版本

也许上面的版本依然不是最好的，现在我认为也许我使用下面的这个软件，做这样的笔记会更加的好；在这种方式，我们课程的重点聚焦就是 “文章”，通过学习文章，我们来分析其中的语法，和知识点，词汇，然后把他们都汇总来。顺便再建立一个特点的 “收集库”来总结和归纳所有的，词汇，词法，语法的一览表哥，能够快速的速记一些重要的知识点，

总结一下，我发现学习这件事情，实际上是一个 “演化的过程”，需要我们不断的迭代迭代，再迭代, 正如我在文章：

认知方法论_第二期 ( 适用于老李 )重要置顶

总的来说，我认为目前的这种思维模式带给了我一定启示 PDCA，不停的不断的去给自己迭代。这就是演化所给我带来的力量，也许还有很多能给我带来更多的成就... 等待我的发掘

用长远的眼光看待所有的事情

来自乔帮主的一次演讲

记录一次Nginx

记录一个Nginx 和二级域名 + 前端框架的部署问题 📝。

需求背景：

要求部署的时候使用不同的URL 来区分不同的环境

需求背景	部署要求
我们开发了一个shopify的插件，它具备了很多功能，主要分三个部分，2B+ 2C（React 纯js +them- extension ） + game	部署到三个不同的环境中去，比起给要求是二级域名

环境	前端	后端
dev	youhoust.com/shopify_app/app1/2b_gqc -> b端指向一个spa应用 youhoust.com/shopify_app/app1/2c_gqc/game1 -> c端game 指向一个 Pahaser 应用 shopify.com/sss/sss -> shopify 会自动去载入你的js，我，只需要动态创建root 节点，再一次性挂在全部js 就好了。	youhoust.com/shopify_app/app1/api_gqc
staging	youhoust.com/shopify_app/app1/2b_staging -> b端指向一个spa应用 youhoust.com/shopify_app/app1/2c_staging/game1 -> c端game 指向一个 Pahaser 应用 shopify.com/sss/sss -> shopify 会自动去载入你的js，我，只需要动态创建root 节点，再一次性挂在全部js 就好了。	youhoust.com/shopify_app/app1/api_staging
prd	youhoust.com/shopify_app/app1/2b_prd -> b端指向一个spa应用 youhoust.com/shopify_app/app1/2c_prd/game1 -> c端game 指向一个 Pahaser 应用 shopify.com/sss/sss -> shopify 会自动去载入你的js，我，只需要动态创建root 节点，再一次性挂在全部js 就好了。	youhoust.com/shopify_app/app1/api

这种我们如何做呢？我们先来看看使用Nginx 的前端方案，这些方案都是有经验的大佬总结来的，我们可以借鉴一下

首先呢是

Nginx中文文档

，一些值得借鉴的文章

知乎的文章

nginx配置选项try_files详解_势无形的博客-CSDN博客_tryfiles

他们基本上就是说一件事：使用 try_files 基本上就能解决你的所有需求

综合上面所述我只需要这样配置nginx 就能达到我需需要的效果

worker_processes  1;
 
events {
    worker_connections  1024;
}
 
http {
 
    include       mime.types;
    default_type  application/octet-stream;
    server_tokens off;
    sendfile        on;
 
    keepalive_timeout  65;
    client_header_buffer_size    2m;
    large_client_header_buffers  4 2m;
    client_max_body_size 0;
    client_body_buffer_size 2m;
    underscores_in_headers on;
    ignore_invalid_headers off;
 
    server {
        listen 80;
        root /opt/app;
        gzip on;
        gzip_min_length 1k;
        gzip_buffers 4 8k;
        gzip_http_version 1.1;
        client_header_buffer_size    2m;
        large_client_header_buffers  4 2m;
        client_max_body_size 0;
        client_body_buffer_size 2m;
        underscores_in_headers on;
        ignore_invalid_headers off;
 
        # 运行跨越配置
        #允许跨域请求的域，* 代表所有 PRD 需要加上处理GQC 允许所有访问
        add_header 'Access-Control-Allow-Origin' *;
        #允许带上cookie请求
        add_header 'Access-Control-Allow-Credentials' 'true';
        #允许请求的方法，比如 GET/POST/PUT/DELETE
        add_header 'Access-Control-Allow-Methods' *;
        #允许请求的header
        add_header 'Access-Control-Allow-Headers' *;
                
        # ----------dev 本地开发
        # 2b
        location ^~ /shopify_campaign_app_ui_gqc_2b/  { 
          root /opt/app;
          try_files $uri  /shopify_campaign_app_ui_gqc_2b/index.html;
        }
 
        # 2c 
        location ^~ /shopify_campaign_app_ui_gqc_2c/  {
          root /opt/app/games/;
          try_files $uri  $uri/ ;
        }
 
        
 
        # ---------- staging 灰度
        # 2b
        location ^~ /shopify_campaign_app_ui_staging_2b/  { 
          root /opt/app;
          try_files $uri  /shopify_campaign_app_ui_staging_2b/index.html;
        }
 
        # 2c 
        location ^~ /shopify_campaign_app_ui_staging_2c/  {
          root /opt/app/games/;
          try_files $uri  $uri/ ;
        }
        
 
 
        # ---------- prd  产线
        # 2b
        location ^~ /shopify_campaign_app_ui/  { 
          root /opt/app;
          try_files $uri  /shopify_campaign_app_ui/index.html;
        }
 
        # 2c 
        location ^~ /shopify_campaign_app_ui_2c/  {
          root /opt/app/games/;
          try_files $uri  $uri/ ;
        }
    }
}

⚠️ 注意，你不仅仅要关注 nginx 的配置，你还要确保的你的文件夹结构📁 组织的正确性，下面是适合上面配置的文件夹结构

这里我是使用docker 部署的一个独立的webService，在运行的时候需要指定一些环境。
而且还需要手动的执行 nginx 去开启，但是应该有更好的方式去实现。
对于前端不同的环境，区分我们是通过代码注入的方式去替换了api 地址的二级陆游地址，现在我们来看看（由于这不是终点，我们简单讲）

# 进入到app的目录下
$ nginx 
$ nginx 
# 连续两下nginx 就能运行了

 
FROM node:latest
RUN  apt-get -y update && apt-get -y install nginx  
RUN  apt-get -y update && apt-get -y install vim
RUN wget ftp://mama.indstate.edu/linux/tree/tree-1.6.0.tgz
RUN  tar xzvf tree-1.6.0.tgz
RUN  cd tree-1.6.0 &&  make && make install
 
# runtime 配置
COPY script /opt/app
 
# prd & gqc & staging
COPY build/admin/prd /opt/app/shopify_campaign_app_ui
COPY build/admin/gqc /opt/app/shopify_campaign_app_ui_gqc_2b
COPY build/admin/staging /opt/app/shopify_campaign_app_ui_staging_2b
 
COPY build/games/prd /opt/app/games/shopify_campaign_app_ui_2c
COPY build/games/gqc /opt/app/games/shopify_campaign_app_ui_gqc_2c
COPY build/games/staging /opt/app/games/shopify_campaign_app_ui_staging_2c
 
COPY nginx.conf /etc/nginx
ENV shopify_env gqc
 
WORKDIR /opt/app
CMD sh /opt/app/runtime.sh